<template>
    <div class="main" v-loading="loading">
        <el-row class="categoryBox">
            <el-col :span="8"><h3 class="overflowEllipsis"> 一级分类： {{templateFormData.firstcategoryname}}</h3></el-col>
            <el-col :span="8"><h3 class="overflowEllipsis" v-if="templateFormData.level >= 2"> 二级分类： {{templateFormData.secondarycategoryname}}</h3>
            </el-col>
            <el-col :span="8"><h3 class="overflowEllipsis" v-if="templateFormData.level == 3"> 三级分类： {{templateFormData.thirdcategoryname}}</h3></el-col>
        </el-row>
        <!-- 模板配置表单 -->
        <el-form
            class="query-form templateForm"
            label-width="80px"
            size="medium">
            <h3 class="typeTitle"><span>商品属性模板</span></h3>
            <div class="templateBG">
                <el-row>
                    <el-col :span="17" :offset="3">
                        <el-form-item prop="goodsTemplateName" label="模板名称">
                            <el-input v-model="attributesname" placeholder="请选择模板"
                                      readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" :offset="1">
                        <el-button type="primary" size="medium" @click="addTemplate()">关联模板</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-row>
                <el-col :span="24">
                    <el-button style="margin-right:20px;" @click="goBack">返 回</el-button>
                    <el-button type="primary" @click="submitTemplate">保存设置</el-button>
                </el-col>
            </el-row>
        </el-form>
        <!-- 模板列表弹窗估计有分页 -->
        <el-dialog title="选择模板" width="1000px" v-loading="loading" :visible.sync="dialogTemplate">
            <el-form :model="query"
                     :rules="rulesSearch"
                     ref="ruleSearch"
                     label-width="120px"
                     :inline="true"
                     size="mini"
                     class="demo-ruleForm">
                <el-form-item label="模板名称查询：" prop="name">
                    <el-input v-model="query.attributesname" placeholder="请输入模板名称" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="templateListData" border>
                <el-table-column property="attributesid" label="模板ID" align="center" width="100"></el-table-column>
                <el-table-column property="attributesname" label="模板名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button type="primary"
                                   size="mini"
                                   @click.native="relationTemplate(scope.row)">关联
                        </el-button>
                        <el-button type="primary"
                                   size="mini"
                                   @click.native="seeTemplate(scope.row.attributesid)">查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页模块start-->
            <el-pagination class="pagination-container"
                           background
                           :page-size="query.pageSize"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           layout="total,sizes,prev, pager, next, jumper"
                           :current-page="query.currentPage"
                           :page-sizes="[10, 20, 30, 50]"
                           :total="totalNumber"></el-pagination>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button type="danger" @click="dialogTemplate = false">关 闭</el-button> -->
                <!-- <el-button type="primary" @click="dialogTemplate = false">确 定</el-button> -->
            </div>
        </el-dialog>
        <!-- 查看模板模板弹窗 -->
        <el-dialog :title="templateName" width="800px" v-loading="loading" :visible.sync="dialogTemplateInfo">
            <!-- disabled -->
            <el-form :model="item"
                     :inline="true"
                     v-for="item in templateItemFormList" :key="item.id"
                     size="medium"
                     class="demo-ruleForm">
                <div>
                    <!-- label="模板名称：" -->
                    <el-form-item prop="name">
                        <el-input v-model="item.fieldname" disabled></el-input>
                    </el-form-item>
                    <!--  label="模板类型：" -->
                    <el-form-item prop="name">
                        <el-select v-model="item.fieldtype"
                                   clearable disabled>
                            <el-option v-for="(v,i) in ['文字', '图片', '数字']"
                                       :key="i"
                                       :label="v"
                                       :value="v"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--  label="是否必填：" -->
                    <el-form-item prop="name">
                        <el-select v-model="item.ismust" disabled
                                   clearable>
                            <el-option :label="'必填'"
                                       :value="0"></el-option>
                            <el-option :label="'非必填'"
                                       :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button type="danger" @click="dialogTemplate = false">关 闭</el-button> -->
                <!-- <el-button type="primary" @click="dialogTemplate = false">确 定</el-button> -->
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        bindAttributesTemplate,
        queryAttributesById,
        queryAttributesTemplateList
    } from "../../api/classification/classification.js";

    export default {
        components: {},
        data() {
            return {
                loading: false, // 页面加载效果
                query: {
                    currentPage: 1,
                    pageSize: 10,
                    attributesname: null
                },
                rulesSearch: {
                    // searchtext: {
                    //     required: true,
                    //     message: "请输入模板名称",
                    //     trigger: "blur"
                    // }
                },
                totalNumber: 0, // 选择模板弹窗分页总页数
                dialogTemplate: false, // 选择模板弹窗
                dialogTemplateInfo: false, // 模板信息弹窗
                templateFormData: {},
                attributesname:'',
                arrInfo: {}, // 关联属性信息
                templateListData: [], // 模板列表数据
                templateItemFormList: [], // 模板数据列表
                templateName: "" // 模板名称
            };
        },
        methods: {
            // 搜索模板
            onSearch() {
                this.query.currentPage = 1;
                this.queryAttributesTemplateList();
            },
            /*弹窗 选择每页条数【10,20,30,40,50】*/
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.queryAttributesTemplateList(); // 重新查询列表
            },
            /*弹窗 点击页数*/
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.queryAttributesTemplateList(); // 重新查询列表
            },
            // 提交模板表单
            submitTemplate() {
                if(!this.attributesname){
                    this.$message.error('请选择商品属性模板')
                    return false
                }


                let msg = '',sureBut='确定',cancelBut='取消'
                if(this.templateFormData.level == 1){
                    msg = '是否覆盖该一级分类下的二级分类和三级分类关联的属性模板？'
                    sureBut = '覆盖'
                    cancelBut = '不覆盖'
                }else if(this.templateFormData.level == 2){
                    msg = '是否覆盖该二级分类下三级分类关联的属性模板？'
                    sureBut = '覆盖'
                    cancelBut = '不覆盖'
                }else if(this.templateFormData.level == 3){
                    msg = '确定关联此模板？'
                }

                this.$confirm(msg, '提示', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: sureBut,
                    cancelButtonText: cancelBut,
                    type: 'warning'
                }).then(() => {
                    this.arrInfo.iscover = 1
                    this.toBind()
                }).catch(action => {
                    if(action === 'cancel'){
                        this.arrInfo.iscover = 0
                        if(this.templateFormData.level < 3) {
                            this.toBind()
                        }
                    }
                })


            },
            toBind(){
                this.loading = true
                let data = {
                    attributesid: this.arrInfo.attributesid,
                    iscover: this.arrInfo.iscover,
                    level: this.templateFormData.level,
                    topcategoryid: this.templateFormData.topcategoryid
                }

                bindAttributesTemplate(data)
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message)
                            this.loading = false
                            return false
                        }
                        this.$message.success("保存成功！")
                        this.goBack()
                        this.loading = false
                        // 清空表单
                        // this.$refs["ruleTemplate"].resetFields();
                    })
                    .catch(err => {
                        this.$message.error(err)
                        this.loading = false
                    });
            },
            goBack() {
                this.$router.push({
                    path: "/commodity/classification", // 关联商家模板页面
                    query:{
                        type:this.templateFormData.level
                    }
                });
            },
            // 获取模板列表
            queryAttributesTemplateList() {
                this.loading = true;
                queryAttributesTemplateList(this.query)
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            this.loading = false;
                            return false;
                        }
                        console.log(response);
                        this.templateListData = response.data.list || [];
                        this.totalNumber = response.data.totalNumber || 0;
                        this.loading = false;
                        // 清空表单
                    })
                    .catch(err => {
                        this.$message.error(err);
                        this.totalNumber = 0;
                        this.loading = false;
                    });
            },
            queryAttributesById(id){
                queryAttributesById({
                    topCategoryId:id
                })
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            this.loading = false;
                            return false;
                        }
                        console.log(response);
                        this.loading = false;
                        this.templateFormData = response.data
                        // 清空表单
                        if(this.$route.query.from == 'toRelation'){
                            this.attributesname = this.$route.query.attributesname
                        }else{
                            this.attributesname = this.templateFormData.attributesname
                        }
                    })
                    .catch(err => {
                        this.$message.error(err);
                        this.totalNumber = 0;
                        this.loading = false;
                    })
            },
            // relationTemplate(row){
            //     this.arrInfo = row
            //     this.templateFormData.attributesname = row.attributesname
            //     let msg = ''
            //     if(this.templateFormData.level == 1){
            //         msg = '关联模板后，将此模板关联到该分类下所有的二级和三级分类，是否确定关联？'
            //     }else if(this.templateFormData.level == 2){
            //         msg = '是否同步修改该二级分类下的三级分类关联的属性模板？'
            //     }else if(this.templateFormData.level == 3){
            //         msg = '确定关联此模板？'
            //     }
            //     this.$confirm(msg, '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            //     }).then(() => {
            //         this.arrInfo.iscover = 1
            //         this.dialogTemplate = false
            //     }).catch(() => {
            //         this.arrInfo.iscover = 0
            //         this.dialogTemplate = false
            //     })
            // },
            // 打开模板列表弹窗
            addTemplate() {
                // this.dialogTemplate = true;

                this.$router.push({
                    path: "/commodity/relationAttributeList",
                    query: {id:this.$route.query.id}
                });
            },

            // 查看模板
            // seeTemplate(attributesid) {
            //     queryAttributesTemplateInfo({
            //         attributesid:attributesid
            //     })
            //         .then(response => {
            //             if (response.code != 0) {
            //                 this.$message.error(response.message);
            //                 this.loading = false;
            //                 return false;
            //             }
            //             console.log(response);
            //             this.loading = false;
            //             this.templateFormData = response.data
            //             // 清空表单
            //         })
            //         .catch(err => {
            //             this.$message.error(err);
            //             this.totalNumber = 0;
            //             this.loading = false;
            //         })
            //     this.templateName = row.name;
            //     this.templateItemFormList = row.templateItemFormList || [];
            //     this.dialogTemplateInfo = true;
            // }
        },
        created() {

            let id = this.$route.query.id
            this.arrInfo.attributesid = this.$route.query.attributesid

            this.arrInfo.iscover = 0
            this.queryAttributesById(id)
            // this.queryAttributesTemplateList();
        }
    };
</script>
<style lang="scss" scoped>
    .main {
        width: 1000px;
        // border: 1px solid #d5d5d5;
        // box-shadow: 0px 0px 10px 1px #f5f5f5;
    }

    .categoryBox {
        padding: 20px;
        // background-color: #f9f9f9;
        box-shadow: 0px 0px 21px 1px #f5f5f5;
    }

    .templateForm {
        padding: 20px;
        // border: 1px solid #d5d5d5;
        // box-shadow: 0px 0px 21px 1px #f5f5f5;
    }

    .typeTitle {
        line-height: 40px;
        padding: 10px;
        margin-bottom: 20px;

        span {
            padding: 0 5px;
            height: 20px;
            line-height: 20px;
            display: block;
            border-left: 3px solid #409eff;
        }
    }

    .templateBG {
        padding-top: 22px;
        // background-color: #f9f9f9;
        box-shadow: 0px 0px 21px 1px #f5f5f5;
        margin-bottom: 22px;
    }

    .templateTitle {
        line-height: 33px;
    }

    .overflowEllipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
